27 - Les flexboxs

Flexbox

Flexbox est un modèle de boîte flexible permettant de gérer le positionnement des éléments dans un conteneur d'une manière plus fluide qu'avec les modèles de boîte classique.

Pour qu'un conteneur devienne un conteneur flex, il faut changer son type :

            

                div{
                    display: flex;
                }

            
        

Distributions des enfants d'un élément flex

Il y a 4 directions possibles pour distribuer les enfants d'un élément flex :

• row : horizontale, c'est la valeur par défaut
• column : verticale
• row-reverse horizontale inversé
• column-reverse verticale inversé

            

                div{
                    display: flex;
                    /* Tous les éléments enfants seront disposés en ligne côte à côte */
                    flex-direction: row;
                }

            
        

Gestion du passage à la ligne des éléments

Il y a 3 paramètres possibles pour gérer le manque de place :

• nowrap : les éléments ne passent pas à la ligne, c'est la valeur par défaut
• wrap : les éléments passent à la ligne dans le sens de lecture
• wrap-reverse : les éléments passent à la ligne dans le sens inverse

            

                div{
                    display: flex;
                    /* Tous les éléments enfants seront disposés en ligne côte à côte */
                    flex-direction: row;
                    /* Si il y a un manque de place, les éléments passeront à la ligne du dessous */
                    flex-wrap: wrap;
                }

            
        

Alignements

Il est possible de gérer l'alignement sur l'axe principal avec la propriété "justify-content" et sur l'axe secondaire avec la propriété "align-items" :

L'axe principal et secondaire varies en fonction du paramétrage de la direction de votre flexbox :

• Si "flex-direction" vaux "row" ou "row-reverse", alors l'axe principal sera l'axe horizontal et l'axe secondaire sera l'axe vertical
• Si "flex-direction" vaux "column" ou "column-reverse", alors l'axe principal sera l'axe vertical et l'axe secondaire sera l'axe horizontal

Les valeurs possibles pour les alignements sont les suivantes :

• flex-start : éléments positionnés au début de l'axe, c'est la valeur par défaut
• flex-end : éléments positionnés à la fin de l'axe
• center : éléments centrés au milieu de l'axe
• space-between : les éléments sont espacés à égale distance sur tout l'axe (et sont collés aux "bords" de l'axe)
• space-around : les éléments sont espacés à égale distance sur tout l'axe (et ne sont pas collés aux "bords" de l'axe)

            

                div{
                    display: flex;
                    /* Tous les éléments enfants seront disposés en ligne côte à côte */
                    flex-direction: row;
                    /* Si il y a un manque de place, les éléments passeront à la ligne du dessous */
                    flex-wrap: wrap;

                    /* Les éléments seront centrés sur l'axe principal (sur l'axe horizontal dans cet exemple) */
                    justify-content: center;

                    /* Les éléments seront centrés sur l'axe secondaire (sur l'axe vertical dans cet exemple) */
                    align-items: center;
                }

            
        

Utiliser les deux alignement permet de réaliser facilement des centrages horizontaux et verticaux parfaits !

Aller plus loin

Pour aller plus loin, vous pouvez suivre cet excellent cours de Alsacreations : https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Pour vous entraîner à utiliser les flexboxs, vous pouvez utiliser ce site : https://flexboxfroggy.com/#fr

Documentation sur le MDN : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox